<template>
  <div>
    <div class="el-button-group">
      <el-button type="primary" @click="addLocVisible= true" style="margin-top: 10px" >新增上课教室</el-button>
    </div>
    <!--教室表格-->
    <el-table title="教室列表" :data="tableData" border stripe style="width: fit-content;margin:10px;">
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="50">
      </el-table-column>
      <el-table-column
          fixed
          prop="area"
          label="校区(待更新"
          width="90">
      </el-table-column>
      <el-table-column
          fixed
          prop="building"
          label="教学楼"
          width="100">
      </el-table-column>
      <el-table-column
          fixed
          prop="courseLocation"
          label="教室编号"
          width="100">
      </el-table-column>
      <el-table-column
          fixed
          prop="volume"
          label="教室容量"
          width="100">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="editLoc(scope.row)" type="text" >编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定要删除这间教室吗？" @confirm="delLoc(scope.row.courseLocation)" >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--新增教室弹窗-->
    <el-dialog title="新增上课教室" :visible.sync="addLocVisible" @closed="resetAddLoc('addLocForm',)" width="600px">
      <el-form :model="addLocForm" :rules="LocRules" ref="addLocForm">
        <el-form-item label="教学楼" prop="building" label-width="100px">
        <el-select v-model="addLocForm.building" placeholder="请选择" clearable filterable>
          <el-option
              v-for="item in buildingData"
              :key="item"
              :label="item"
              :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="教室编号" prop="courseLocation" label-width="100px">
          <el-input v-model="addLocForm.courseLocation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="教室容量" prop="volume" label-width="100px">
          <el-input v-model="addLocForm.volume" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetAddLoc('addLocForm')">取 消</el-button>
        <el-button type="primary" @click="submitAddLoc('addLocForm')">提交</el-button>
      </div>
    </el-dialog>

    <!--编辑教室弹窗-->
    <el-dialog title="编辑上课教室" :visible.sync="editLocVisible" @closed="resetEditLoc('editLocForm',)" width="600px">
      <el-form :model="editLocForm" :rules="LocRules" ref="editLocForm">
        <el-form-item label="教室id" prop="id" label-width="100px">
            <el-input v-model="editLocForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="教学楼" prop="building" label-width="100px">
          <el-select v-model="editLocForm.building" placeholder="请选择" clearable filterable>
            <el-option
                v-for="item in buildingData"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室编号" prop="courseLocation" label-width="100px">
          <el-input v-model="editLocForm.courseLocation " @input="change()" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="教室容量" prop="volume" label-width="100px">
          <el-input v-model="editLocForm.volume" @input="change()" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditLoc('editLocForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditLoc('editLocForm')">提交</el-button>
      </div>
    </el-dialog>
    <!--分页-->
    <div class="block">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ClassroomArrange",
    data() {
      return {
        locationData:[],
        buildingData:[],

        addLocForm:{},
        editLocForm:{},

        addLocVisible: false,
        editLocVisible: false,

        LocRules: {
          building:[
            {required: true, message: '请选择教学楼', trigger: 'blur'},
          ],
          courseLocation:[
            {required: true, message: '请输入新教室编号', trigger: 'blur'},
            {pattern:/^[0-9a-zA-Z]+$/,message: "只能出现英文数字",trigger:"blur"}
          ],
          volume:[
            {required: true, message: '请输入教室容量', trigger: 'blur'},
            {pattern:/^[1-9]\d*$/,message: "请输入正整数",trigger:"blur"}
          ]
        },

        //分页相关
        currentPage: 1,//当前页码
        pageSize: 10,//每页的数据条数
        totalPage: 0,//默认数据总数
        tableData:[],//当前页显示数据
      }
    },
    created() {
      this.getLocationList();
      this.handleCurrentChange(10);
      this.getBuildingList();
      this.getTimeList();
    },
    methods:{
      //分页相关
      //改变一页显示的数据量
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;//默认第一页
        this.pageSize = val;//控制每页多少条
        this.tableData = this.locationData.filter((item,index) => {
          return index < this.pageSize
        })
      },
      //跳转页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;//当前页
        let prev = this.pageSize * (val - 1);
        let pres = this.pageSize * val;
        let tabList=[];
        for(let i = prev; i < pres; i++) {
          if (this.locationData[i]) {
            tabList.push(this.locationData[i])
          }
          this.tableData = tabList
        }
      },


      //强制刷新解决input无法输入问题
      change(){
        this.$forceUpdate();
      },
      //获得教室列表
      getLocationList(){
        this.$axios.get("/sys/location/list").then(res => {
          this.locationData = res.data.data;
          this.totalPage = res.data.data.length;
          console.log("数据总量is",this.totalPage);
          this.currentPage = 1; //默认显示第一页
          // this.pageSize = 10; //每页显示多少数据
          //显示数据
          this.tableData = this.locationData.filter((item,index) => {
            return index < this.pageSize;
          })
        })
      },
      //获得教学楼列表
      getBuildingList(){
        this.$axios.get("/sys/location/building").then(res => {
          this.buildingData = res.data.data;
        })
      },
      //获得课程时间列表
      getTimeList(){
        this.$axios.get("/sys/time/list").then(res => {
          this.timeData = res.data.data;
        })
      },

      //新增教室表单
      submitAddLoc(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/sys/location/save',this.addLocForm).then(res => {
              console.log(res.data)
              this.resetAddLoc(formName)
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
                onClose: () => {
                  this.getLocationList();
                  this.handleCurrentChange(1);
                }
              });
            })
            this.addLocVisible = false;
          } else {
            console.log('error submit!');
            return false;
          }
        });
      },
      //重设新增教室表单
      resetAddLoc(formName){
        this.$refs[formName].resetFields();
        this.addLocVisible = false
        this.addLocForm = {}
      },

      //编辑教室
      editLoc(row){
        this.editLocForm.id=row.id;
        this.editLocForm.courseLocation = row.courseLocation;
        this.editLocForm.building = row.building;
        this.editLocForm.volume = row.volume;
        this.editLocVisible = true;
      },
      //编辑教室表单
      submitEditLoc(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/sys/location/update',this.editLocForm).then(res => {
              console.log("表格",this.editLocForm)
              this.resetEditLoc(formName)
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
                onClose: () => {
                  this.getLocationList();
                  this.handleCurrentChange(1);
                }
              });
            })
            this.editLocVisible = false;
          } else {
            console.log('error submit!');
            return false;
          }
        });
      },
      //重设新增教室表单
      resetEditLoc(formName){
        this.$refs[formName].resetFields();
        this.editLocForm = {}
        this.editLocVisible = false
      },

      //删除教室
      delLoc(courseLocation){
        this.$axios.post("/sys/location/delete",{courseLocation:courseLocation}).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
            onClose: () => {
              this.getLocationList();
              this.handleCurrentChange(1);
              //刷新一下
              window.location.reload();
            }
          });
        })
      },

    }
  }
</script>

<style scoped>

</style>